<template>
  <div style="margin-top: 20px">
    <ko-card :title="$t('business.configuration.target')">
      <el-form ref="form" label-position="top" :model="form">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item
              :label="$t('business.configuration.target_reference')"
            >
              <el-select
                v-model="form.scaleTargetRef"
                filterable
                clearable
                value-key="name"
                style="width: 100%"
                required
                @change="onSave"
              >
                <el-option
                  v-for="d in deploymentList.items"
                  :key="d.metadata.name"
                  :label="d.metadata.name"
                  :value="{
                    kind: deploymentList.kind,
                    apiVersion: deploymentList.apiVersion,
                    name: d.metadata.name
                  }"
                >
                  <span style="float: left">{{ d.metadata.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    deploymentList.kind
                  }}</span>
                </el-option>
                <el-option
                  v-for="d in replicaSetList.items"
                  :key="d.metadata.name"
                  :label="d.metadata.name"
                  :value="{
                    kind: replicaSetList.kind,
                    apiVersion: replicaSetList.apiVersion,
                    name: d.metadata.name
                  }"
                >
                  <span style="float: left">{{ d.metadata.name }}</span>
                  <span style="float: right; color: #8492a6; font-size: 13px">{{
                    replicaSetList.kind
                  }}</span>
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item :label="$t('business.configuration.min_replicas')">
              <el-input
                v-model.number="form.minReplicas"
                type="number"
                required
                @change="onSave"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="$t('business.configuration.max_replicas')">
              <el-input
                v-model.number="form.maxReplicas"
                type="number"
                required
                @change="onSave"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </ko-card>
  </div>
</template>

<script setup lang="ts">
import KoCard from "@/views/domain/kubeHud/views/components/ko-card/index.vue";
import { Deployment, DeploymentList, useK8SApi } from "../../../api/k8s";
// import { listDeploymentsByNs } from "@/api/deployments";
// import { listNsReplicaSets } from "@/api/replicasets";
// import { checkPermissions } from "@/utils/permission";
import { checkPermissions } from "../../../utils/permission";
import { onMounted, ref, watch } from "vue";
const { deploymentRepo, replicaSetRepo } = useK8SApi();

type Prop = {
  namespace?: string;
  cluster?: string;
  specObj?: any;
};

const props = defineProps<Prop>();
const emit = defineEmits(["update:specObj"]);
const form = ref({
  scaleTargetRef: {},
  minReplicas: 1,
  maxReplicas: 1
});

const deploymentList = ref<DeploymentList>({
  apiVersion: "v1",
  items: [],
  kind: "Deployment"
});

const replicaSetList = ref<DeploymentList>({
  apiVersion: "v1",
  items: [],
  kind: "ReplicaSet"
});

const getReferences = () => {
  checkPermissions({
    scope: "namespace",
    apiGroup: "apps",
    resource: "storageclasses",
    verb: "list"
  }).then(res => {
    if (!res) {
      return;
    }
    reloadDeployList();
    reloadReplicaSetList();
  });
};

const reloadDeployList = () => {
  deploymentRepo
    .getDeploymentList({
      namespace: props.namespace,
      clusterName: props.cluster
    })
    .then(res => {
      deploymentList.value = res;
    });
};

const reloadReplicaSetList = () => {
  replicaSetRepo
    .listNsReplicaSets({
      clusterName: props.cluster,
      namespace: props.namespace
    })
    .then(res => {
      replicaSetList.value = res;
    });
};

const onSave = () => {
  emit("update:specObj", form.value);
};

onMounted(() => {
  if (props.specObj) {
    form.value = props.specObj;
  }
  if (props.namespace !== "") {
    getReferences();
  }
});

watch(
  () => props.namespace,
  (newValue, oldValue) => {
    if (oldValue !== newValue) {
      form.value = {
        scaleTargetRef: {},
        minReplicas: 1,
        maxReplicas: 1
      };
      getReferences();
    }
  }
);
</script>

<style scoped></style>
